
    
<script setup>
import TransWorker from "./lib/transcode.worker";
import { encode, decode } from "js-base64";
import VMS from "./lib/vms-2d-web-sdk-2.0.0.esm.min.js";




import { nextTick, ref } from "vue";
const transWorker = new Worker(TransWorker);
import {
  VAPPID as appId,
  VAPI_SECRET as apiSecret,
  VAPI_KEY as apiKey,
} from "@/utils/APIKEY";


console.log(appId)
console.log(apiSecret)
console.log(apiKey)
//形象列表
const avatarList = {
  110017006: {
    name: "马可",
    actionList: [
      {
        name: "身体微侧，左手有请",
        id: "A_LH_please_O",
      },
      {
        name: "右手手掌强调",
        id: "A_RH_emphasize2_O",
      },
      {
        name: "右手握拳加油",
        id: "A_RH_encourage_O",
      },
      {
        name: "右手点赞夸奖",
        id: "A_RH_good_O",
      },
      {
        name: "右手欢迎",
        id: "A_RH_hello_O",
      },
      {
        name: "右手有请",
        id: "A_RH_please1_O",
      },
      {
        name: "右手向右",
        id: "A_RH_please_O",
      },
      {
        name: "双手强调",
        id: "A_RLH_emphasize_O",
      },
    ],
  },
  // 110023005: '小柔',
  110018008: {
    name: "晓颜",
    actionList: [
      {
        name: "左手左上介绍",
        id: "A_LH_introduced_O",
      },
      {
        name: "右手向下指",
        id: "A_RH_click_O",
      },
      {
        name: "右手手掌强调",
        id: "A_RH_emphasize2_O",
      },
      {
        name: "右手点赞夸奖",
        id: "A_RH_good_O",
      },
      {
        name: "右手欢迎",
        id: "A_RH_hello_O",
      },
      {
        name: "右手向右上介绍",
        id: "A_RH_introduced1_O",
      },
      {
        name: "右手食指胸前右滑",
        id: "A_RH_introduced_O_1",
      },
      {
        name: "双手强调",
        id: "A_RLH_emphasize_O",
      },
      {
        name: "双手无奈",
        id: "A_RLH_puzzle_0",
      },
      {
        name: "双手打开",
        id: "A_RLH_welcome_O",
      },
    ],
  },
  110026010: {
    name: "伊凡",
    actionList: [
      {
        name: "左手左上介绍",
        id: "A_LH_introduced_O",
      },
      {
        name: "右手向下指",
        id: "A_RH_click_O",
      },
      {
        name: "右手手掌强调",
        id: "A_RH_emphasize2_O",
      },
      {
        name: "右手向右上介绍",
        id: "A_RH_introduced1_O",
      },
      {
        name: "右手点赞夸奖",
        id: "A_RH_good_O",
      },
      {
        name: "右手欢迎",
        id: "A_RH_hello_O",
      },
      {
        name: "右手食指胸前右滑",
        id: "A_RH_introduced_O_1",
      },
      {
        name: "双手打开",
        id: "A_RLH_welcome_O",
      },
      {
        name: "双手强调",
        id: "A_RLH_emphasize_O",
      },
    ],
  },
  118801001: {
    name: "依丹",
    actionList: [
      {
        name: "左手左上介绍",
        id: "A_LH_introduced_O",
      },
      {
        name: "身体微侧，左手有请",
        id: "A_LH_please_O",
      },
      {
        name: "右手打招呼",
        id: "A_RH_bye_O",
      },
      {
        name: "右手手掌强调",
        id: "A_RH_emphasize2_O",
      },
      {
        name: "右手食指强调",
        id: "A_RH_emphasize_O",
      },
      {
        name: "右手握拳加油",
        id: "A_RH_encourage_O",
      },
      {
        name: "右手点赞夸奖",
        id: "A_RH_good_O",
      },
      {
        name: "右手掌心呈现介绍",
        id: "A_RH_introduced_O",
      },
      {
        name: "右手向右上介绍",
        id: "A_RH_introduced1_O",
      },
      {
        name: "右手比心",
        id: "A_RH_like_O",
      },
      {
        name: "右手ok",
        id: "A_RH_ok_O",
      },
      {
        name: "右手有请",
        id: "A_RH_please1_O",
      },
      {
        name: "右手向右",
        id: "A_RH_please_O",
      },
      {
        name: "双手强调",
        id: "A_RLH_emphasize_O",
      },
    ],
  },
  110022010: {
    name: "晓云",
    actionList: [
      {
        name: "左手左上介绍",
        id: "A_LH_introduced_O",
      },
      {
        name: "右手向下指",
        id: "A_RH_click_O",
      },
      {
        name: "右手手掌强调",
        id: "A_RH_emphasize2_O",
      },
      {
        name: "右手点赞夸奖",
        id: "A_RH_good_O",
      },
      {
        name: "右手欢迎",
        id: "A_RH_hello_O",
      },
      {
        name: "右手向右上介绍",
        id: "A_RH_introduced1_O",
      },
      {
        name: "右手食指胸前右滑",
        id: "A_RH_introduced_O_1",
      },
      {
        name: "双手强调",
        id: "A_RLH_emphasize_O",
      },
      {
        name: "XXX",
        id: "A_RLH_puzzle_0",
      },
      {
        name: "双手打开",
        id: "A_RLH_welcome_O",
      },
    ],
  },
  110005018: {
    name: "知新",
    actionList: [
      {
        name: "左手点击",
        id: "A_LH_click_O",
      },
      {
        name: "左手左上介绍",
        id: "A_LH_introduced_O",
      },
      {
        name: "右手向下指",
        id: "A_RH_click_O",
      },
      {
        name: "右手欢迎",
        id: "A_RH_hello_O",
      },
      {
        name: "右手向右上介绍",
        id: "A_RH_introduced1_O",
      },
      {
        name: "右手有请",
        id: "A_RH_please1_O",
      },
      {
        name: "双手介绍",
        id: "A_RLH_introduced_O",
      },
    ],
  },
  110017009: {
    name: "110017009",
    actionList: [
      {
        name: "左手左上介绍",
        id: "A_LH_introduced_O",
      },
      {
        name: "身体微侧，左手有请",
        id: "A_LH_please_O",
      },
      {
        name: "右手打招呼",
        id: "A_RH_bye_O",
      },
      {
        name: "右手手掌强调",
        id: "A_RH_emphasize2_O",
      },
      {
        name: "右手食指强调",
        id: "A_RH_emphasize_O",
      },
      {
        name: "右手握拳加油",
        id: "A_RH_encourage_O",
      },
      {
        name: "右手点赞夸奖",
        id: "A_RH_good_O",
      },
      {
        name: "右手掌心呈现介绍",
        id: "A_RH_introduced_O",
      },
      {
        name: "右手向右上介绍",
        id: "A_RH_introduced1_O",
      },
      {
        name: "右手比心",
        id: "A_RH_like_O",
      },
      {
        name: "右手ok",
        id: "A_RH_ok_O",
      },
      {
        name: "右手有请",
        id: "A_RH_please1_O",
      },
      {
        name: "右手向右",
        id: "A_RH_please_O",
      },
      {
        name: "双手强调",
        id: "A_RLH_emphasize_O",
      },
    ],
  },
};
//发音人列表
const vcnList = {
  x3_qianxue: "X3_QIANXUE",
  x3_xiaoye_chongni: "x3_XIAOYE_CHONGNI",
  x3_yezi: "x3_YEZI",
  x3_doudou: "x3_DOUDOU",
  x3_yilin: "x3_YILIN",
  x3_mingge: "x3_MINGGE",
  x3_chaoge: "x3_CHAOGE",
  x3_shaohua: "x3_SHAOHUA",
  x3_lwk_female: "x3_lwk_female",
};

let audioContext, scriptProcessor, mediaSource, webSocket;

let status = "end";

const width = ref(1090);
const height = ref(720);

const avatarId = "110029003";

const audioActions = ref("");
const textPostpro = '';

const transparent = ref(0);
const textActions = ref([
  { type: "action", value: "A_3_7_TYT_M_0", wb: 3, we: 20 },
  { type: "action", value: "A_3_7_ZQQ_M_0", wb: 30, we: 50 },
]);
const actionList = ref([]);

const vmsStatus = ref(0);

const initClient = () => {
  VMS.start({
    appId: appId,
    apiKey: apiKey,
    apiSecret: apiSecret,
    width: width.value, //[1920 1280 720]
    height: height.value, // [1080 720 405]
    avatarId: avatarId,
    streamDomId: "remote_stream",
    resId: "",
    isSsl: true,
    transparent: transparent.value,
    // moveH:moveH,
    // moveV:moveV,
    // scale:scale,
    // maskRegion: maskRegion //'[0,154,1080,1472]'
  })
    .then(() => {
      vmsStatus.value = 1;
      initNitTextDriver();
    })
    .catch((e) => {
      if (e.stream && e.code === 0x4043) {
        let stream = e.stream;
        console.log("兼容有问题");
      }
      vmsStatus.value = 0;
    });
};

transWorker.onmessage = function (event) {
  if (status !== "end") {
    VMS.audioDriverSendData({
      parameter: {
        vms_dispatch: {
          realtime_status: {
            tts_status: 0,
            vmr_status: 0,
            vmr_action_status: 0,
          },
        },
      },
      payload: {
        audio: {
          audio: [...event.data],
          encoding: "raw",
          sample_rate: 16000,
        },
        ctrl_t: audioActions
          ? {
              encoding: "utf8",
              compress: "raw",
              format: "json",
              text: encode(
                JSON.stringify({
                  avatar: audioActions,
                })
              ),
            }
          : undefined,
        ctrl_postproc: textPostpro
          ? {
              // 字偏移控制指令
              encoding: "utf8",
              compress: "raw",
              format: "json",
              status: 1,
              text: encode(JSON.stringify(textPostpro)),
            }
          : undefined,
      },
    });
    if (audioActions) {
      setAudioActions(undefined);
    }
    if (textPostpro) {
      setTextPostpro(undefined);
    }
  }
};

// setTimeout(()=>{
//     initClient();
// },2000)


  //停止服务
  const stop = () => {
    VMS.stop()
      .then(() => {
        // setVmsStatus(0);
        vmsStatus.value = 0;

      })
      .catch((e) => {
        // setVmsStatus(0);
        vmsStatus.value = 0;

      });
  };
 
  const  textContent = ref('你好啊')

  //文本驱动输入框输入
//   声音的id    speed: 50,
let vcn = "x4_lingxiaoshan_profnews"
let speed = 50
let pitch = 50
let volume = 50

let  realtimeStatus =  0
let  interactiveMode =  0
// let  interactiveMode =  0

  const textDrive = () => {
    if (!textContent.value) {
      return;
    }

    VMS.textDriver({
      parameter: {
        tts: {
          vcn, // 发音人
          speed, // 语速：[0,100]，默认50
          pitch, // 语调：[0,100]，默认50
          volume,
        },
      },
      payload: {
        text: {
          encoding: "utf8",
          compress: "raw",
          format: "plain",
          status: 3,
          text: encode(textContent.value),
        },
        ctrl_w: textActions.value
          ? {
              // 字偏移控制指令
              encoding: "utf8",
              compress: "raw",
              format: "json",
              status: 3,
              text: encode(
                JSON.stringify({
                  avatar: textActions.value,
                })
              ),
            }
          : undefined,
        ctrl_postproc: textPostpro
          ? {
              // 字偏移控制指令
              encoding: "utf8",
              compress: "raw",
              format: "json",
              status: 3,
              text: encode(JSON.stringify(textPostpro)),
            }
          : undefined,
      },
    })
      .then((res) => {
        debugger;
      })
      .catch((e) => {});
  };

  //初始化流式文本驱动
  const initNitTextDriver = () => {
    VMS.textDriverNitInit((res) => {
      console.log(
        "非打断返回的实时数据：",
        res.payload ? decode(res.payload.realtime_status.text) : res.payload
      );
    //   setRealtimeRes(
    //     res.payload ? decode(res.payload.realtime_status.text) : res.payload
    //   );
    })
      .then((res) => {
        console.log("非打断文本驱动建立连接成功啦");
      })
      .catch((e) => {
        debugger;
      });
  };

  //重置
  const pauseTextDriverNit = () => {
    VMS.pauseTextDriverNit();
  };


  //文本驱动非打断
  const textDriveNit = () => {
    // initNitTextDriver()
    // bigModel.value.start( "讲一下人工智能的发展历史")
    // VMS.sendTextDriverData({
    //   parameter: {
    //     tts: {
    //       vcn, // 发音人
    //       speed, // 语速：[0,100]，默认50
    //       pitch, // 语调：[0,100]，默认50
    //       volume,
    //     },
    //     vms_dispatch: {
    //       realtime_status: {
    //         tts_status: realtimeStatus,
    //         vmr_status: realtimeStatus,
    //         vmr_action_status: realtimeStatus,
    //       },
    //       interactive_mode: interactiveMode,
    //     },
    //   },
    //   payload: {
    //     text: {
    //       encoding: "utf8",
    //       compress: "raw",
    //       format: "plain",
    //       status: 3,
    //       text: encode(textContent.value),
    //     },
    //     ctrl_w: textActions.value
    //       ? {
    //           // 字偏移控制指令
    //           encoding: "utf8",
    //           compress: "raw",
    //           format: "json",
    //           status: 3,
    //           text: encode(
    //             JSON.stringify({
    //               avatar: textActions.value,
    //             })
    //           ),
    //         }
    //       : undefined,

    //     ctrl_postproc: textPostpro
    //       ? {
    //           // 字偏移控制指令
    //           encoding: "utf8",
    //           compress: "raw",
    //           format: "json",
    //           status: 3,
    //           text: encode(JSON.stringify(textPostpro)),
    //         }
    //       : undefined,
    //   },
    // })
    //   .then((res) => {
    //     console.log("文本驱动数据发送成功");
    //   })
    //   .catch((e) => {
    //     console.log("文本驱动数据发送失败", e);
    //     debugger;
    //   });
  };



</script>
<template>
  <el-card class="m20">

   
    <button  @click="initClient">启动虚拟人</button>
    <button  @click="stop">停止虚拟人</button>
    <button  @click="textDrive">开启播报</button>
    <button  @click="textDriveNit" >流式播报播报</button>
 
    <input type="text"  v-model="textContent">

    <div id="remote_stream" className="remote-stream-area"></div>
 
    <!-- {/* 视频流展示区域 */} -->
    <div id="local_stream"></div>
     
</el-card>
</template>
<style  scoped>
   .remote-stream-area {
    width: 600px;
    height: 1200px;
   }


</style>